<template>
    <div>
        <div class="container">
            <div class="category-detail">
                <!--  <div class="category-detail"> -->
                <CategoryWeb :data="categoryData"></CategoryWeb>
                <div class="blog-list">
                    <div v-for="item in blogList" :key="item.id">
                        <BlogItem :title="item.title" :cover="item.cover" :summary="item.description"
                                  :writer="item.writer" :categoryName="item.categoryName" :time="item.time"
                                  :blogId="item.blogId.toString()"></BlogItem>
                    </div>
                </div>
            </div>
            <!--  </div> -->
            <div class="right">
                <div class="part-title">
                    <span class="title">分类专栏</span>
                    <router-link to="/" class="a-link">更多&gt;&gt;</router-link>
                </div>
                <div v-for="item in categoryList" :key="item.id">
                    <CategoryItem :cover="item.cover" :name="item.categoryName"
                                  :blogCount="item.blogCount"></CategoryItem>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
    import {ref} from 'vue';
    import axios from 'axios'
    import {useRoute} from 'vue-router';

    const route = useRoute();
    const blogList = ref([]);
    const jwtToken = localStorage.getItem('jwtToken');

    const axiosInstance = axios.create({
        headers: {
            'Token': jwtToken // 将JWT令牌放入请求头的token字段
        }
    });
    //获取分类id
    const categoryId = route.params.categoryId;
    //获取分类详情
    const categoryData = ref({});
    axiosInstance.get(`http://localhost:8080/show2/${categoryId}`)
        .then(response => {
            const responseData = response.data;
            categoryData.value = responseData.data[0]; // 赋值给tableData
            console.log(categoryData, 666666666666666666666666666666666)
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    //获取分类里面的博客
    axiosInstance.get(`http://localhost:8080/showCategoryData/${categoryId}`)
        .then(response => {
            blogList.value = response.data.data;
            console.log(response.data.data)
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    //分类就是分类列表
    const categoryList = ref([]);
    axiosInstance.get('http://localhost:8080/show')
        .then(response => {
            const responseData = response.data;
            if (Array.isArray(responseData.data) && responseData.data.length > 0) {
                categoryList.value = responseData.data; // 赋值给tableData
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
</script>

<style lang="scss">

    .category-detail {
        flex: 1;

        .category-item-list {
            width: 100%;

            .item-inner {
                border: none;
            }

            background: #fff;
            font-size: 15px;

        }

        .blog-list {
            margin-top: 20px;
            background: #fff;
            padding: 10px;
        }
    }</style>